<template>
  <div id="left-container">
    <div class="leftContainer">
      <dv-border-box-10>
        <div class="leftContainer_top">
          <div class="leftContainer_top_title">
            相关数据
          </div>
          <div class="leftContainer_top_body">
            <div class="leftContainer_top_body_div">
              <div style="display:flex;height:calc(7vh);align-items: center;">
                <div style="flex:1;text-align:center;margin-left:10px;">
                  <img style="width:30px" src="../../../assets/images/yaoantongBigScreen/book.svg">
                </div>
                <div style="flex:2.2;text-align:center">
                  <div class="num">12亿</div>
                  <div class="name">数据量</div>
                </div>
              </div>
            </div>
            <div class="leftContainer_top_body_div1">
              <div style="display:flex;height:calc(7vh);align-items: center;">
                <div style="flex:1;text-align:center;margin-left:10px;">
                  <img style="width:30px" src="../../../assets/images/yaoantongBigScreen/clock.svg">
                </div>
                <div style="flex:2.2;text-align:center">
                  <div class="num">13年</div>
                  <div class="name">数据年数</div>
                </div>
              </div>
            </div>
          </div>
          <div class="leftContainer_top_bottom" />

        </div>
        <div class="leftContainer_second">
          <div class="leftContainer_top_title">
            假劣药预警
          </div>
          <div class="leftContainer_second_body">
            <scrollBoard :config="config" />
          </div>
        </div>
        <div class="leftContainer_second">
          <div class="leftContainer_top_title">
            假劣药高风险提醒
            <!-- 药品同比销售 -->
          </div>
          <div class="leftContainer_second_body">
            <div style="height:calc(29vh)">
              <VEcharts
                ref="chartClass"
                autoresize
                :options="zxConfig"
                class="chartClass"
                style="width:100%;height:100%"
              />
            </div>
            <!-- <scrollBoard :config="config1" /> -->
          </div>
        </div>
      </dv-border-box-10>

    </div>
  </div>
</template>

<script>
import scrollBoard from './scrollBoard';
import VEcharts from '@/components/vecharts';
export default {
  components: {
    scrollBoard,
    VEcharts
  },
  data() {
    return {
      zxConfig: {
        xAxis: {
          type: 'category',
          data: ['复方氨酚烷胺片', '三黄片', '脑心舒口服液', '阿卡波糖片', '银翘解毒合剂'],
          axisLabel: {
            interval: 0, // 坐标轴刻度标签的显示间隔(在类目轴中有效) 0:显示所有  1：隔一个显示一个 :3：隔三个显示一个...
            rotate: -20 // 标签倾斜的角度，显示不全时可以通过旋转防止标签重叠（-90到90）
          }

        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '3%',
          top: '5%',
          containLabel: true
        },
        series: [{
          data: [120, 200, 150, 80, 70],
          type: 'bar',
          itemStyle: {
            normal: {
              // 这里是重点
              color: function(params) {
              // 注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                var colorList = ['#7078ca', '#5acdf8', '#89cf67', '#f7b54d', '#ef6c42', '#999690', '#8187d1', '#60d3f9', '#99d578', '#f8bf6d'];
                return colorList[params.dataIndex];
              }
            }
          }

        }]
      },
      config: {
        header: ['药品名称', '药店名称', '数量', '销售时间'],
        data: [
          ['诺氟沙星胶囊', '绍***********店', '66', '2018-02-28'],
          ['三黄片', '新*********店', '35', '2020-02-28'],
          ['硫酸庆大霉素注射液*', '老***店', '67', '2020-02-28'],
          ['银翘解毒合剂', '怡***房', '3', '2020-02-28'],
          ['脑心舒口服液', '人**店', '23', '2020-02-28'],
          ['注射用盐酸纳洛酮', '祥*******司', '85', '2020-02-28'],
          ['脑心舒口服液', '华*******店', '12', '2020-02-28'],
          ['阿卡波糖片', '健***店', '16', '2020-02-28'],
          ['复方氨酚烷胺片', '康***房', '56', '2020-02-28']

        ],
        columnWidth: [140, 120, 70, 120],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 35,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      },
      config1: {
        header: ['药品名称', '生产企业', '比例'],
        data: [
          ['诺氟沙星胶囊', '福建古田药业有限公司', '20%'],
          ['三黄片', '河南百年康鑫药业有限公司', '40%'],
          ['硫酸庆大霉素注射液*', '湖北仁悦药业有限公司', '60%'],
          ['银翘解毒合剂', '江西药都樟树制药有限公司', '70%'],
          ['脑心舒口服液', '茂祥集团吉林制药有限公司', '56%'],
          ['注射用盐酸纳洛酮', '青海格萨尔王藏药制药有限公司', '66%'],
          ['脑心舒口服液', '武汉鑫瑞药业有限公司', '66%'],
          ['阿卡波糖片', '郑州卓峰制药有限公司', '88%'],
          ['复方氨酚烷胺片', '徐州莱恩药业有限公司', '90%']

        ],
        columnWidth: [180, 150, 80],
        align: ['center'],
        rowNum: 7,
        headerBGC: '#1981f6',
        headerHeight: 35,
        oddRowBGC: 'rgba(0, 44, 81, 0.8)',
        evenRowBGC: 'rgba(10, 29, 50, 0.8)'
      }
    };
  },
  computed: {
  },
  created() {

  },
  mounted() {

  },
  methods: {

  }
};
</script>
<style lang='scss' scoped>
   .leftContainer{
    height: calc(100vh - 90px);
    border-radius: 10px;
   }
   .leftContainer-title{
     margin-top: 5px;
     font-size: 18px;
     font-weight: bolder;
     color: #fff;
     text-align: center;
     margin-bottom: 5px
   }
   .leftContainer_top_title{
     font-size: 17px;
     font-weight: bolder;
   }
  .leftContainer /deep/ .dv-border-box-10 .border-box-content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 20px;
  }
  .leftContainer_top_body{
    height: calc(7vh);
    display: flex;
    align-items: center
  }
  .leftContainer_top_bottom{
    height: calc(3vh);
    background: url('../../../assets/images/yaoantongBigScreen/bg.png') no-repeat;
    background-size: 100% 100%;
    opacity: 0.5;
  }
  .leftContainer_second{
    margin-top: 20px
  }
  .leftContainer_top_body_div{
    flex:1;
    text-align:center;
    border-right: 1px solid #ffffff94;
    height: 100%;

  }
   .leftContainer_top_body_div1{
     flex:1;
     text-align:center;
     height: 100%;

  }
  .num{
    font-size: 24px;
    font-weight: bolder;
  }
  .name{
    font-size: 8px;
    color: gray
  }
  .leftContainer_second_body{
    margin-top: 10px
  }

</style>
